<template>
  <div class="container">
    <div class="center"
         style="background-image: url('https://www.duanqing.online:9000/blog/R-C.jpg');height: 350px;border-radius: 36%;background-size: cover">
      <vue-danmaku ref="danmaku" :danmus="danmus"
                   use-slot loop
                   :speeds="100" :channels="8"
                   :randomChannel="true"
                   :isSuspend="true"
                   style="width: 800px;
                   border-radius: 30%;
                   height: 300px;
                    ">
        <!-- 弹幕插槽（vue 2.6.0 及以上版本可使用 v-slot:dm="{ index, danmu }"语法） -->
        <template slot="dm" slot-scope="{ index, danmu }">
          <div style="display: flex" class="shine">
<!--            <p v-if="currentIndex===index" style="text-shadow:0 0 10px red;font-size: 30px">{{ danmu.content }}11111</p>-->
            <p>{{ danmu.content }}</p>
          </div>
        </template>
        <!-- 容器插槽 -->
        <div></div>
      </vue-danmaku>
    </div>
    <div style="display: flex" class="center content-inputs">
      <vs-input success v-on:keyup.enter.native='pushMessage' type="text" v-model="message" placeholder="网络不是法外之地,构建友好和谐环境"></vs-input>
      <vs-button color="danger" transparent upload @click="pushMessage" :disabled="message===null">
        <i class='bx bxs-paper-plane'/>
      </vs-button>
    </div>
  </div>
</template>

<script>
import vueDanmaku from 'vue-danmaku'
import Cookies from 'js-cookie'
import axios from 'axios'

export default {
  components: {
    vueDanmaku
  },
  data () {
    return {
      currentIndex: null,
      message: null,
      danmus: [{
        avatar: 'https://www.duanqing.online:9000/blog/logo.png',
        name: 'a',
        text: 'aaa'
      }, {
        avatar: 'https://www.duanqing.online:9000/blog/logo.png',
        name: 'b',
        text: 'bbb'
      }]
    }
  },
  methods: {
    listMessage: function () {
      axios({
        url: '/api/blog/leaveMessageInfo/list',
        method: 'post',
        data: {}
      }).then(async (res) => {
        this.danmus = res.data.data
      })
    },
    pushMessage: function () {
      try {
        const UserInfo = Cookies.get('UserInfo')
        let userId = null
        if (UserInfo !== null && UserInfo !== undefined) {
          userId = JSON.parse(UserInfo).id
        }
        const message = {
          avatar: 'https://www.duanqing.online:9000/blog/logo.png',
          name: 'a',
          content: this.message,
          userId: userId
        }
        axios({
          url: '/api/blog/leaveMessageInfo/add',
          method: 'post',
          data: message
        }).then(async (res) => {
          if (res.data.resp_code === -1) {
            this.$vs.notification({
              progress: 'auto',
              title: '',
              position: 'top-left',
              color: 'danger',
              text: res.data.resp_msg
            })
          } else {
            this.$vs.notification({
              progress: 'auto',
              title: '',
              position: 'top-left',
              color: 'success',
              text: res.data.resp_msg
            })
            const currentIndex = this.$refs.danmaku.add(message)
            console.log(currentIndex)
          }
        })
        this.message = null
      } catch (e) {
        return []
      }
    }
  },
  mounted () {
    this.listMessage()
    this.$vs.notification({
      progress: 'auto',
      position: 'top-left',
      color: 'danger',
      title: '留言须知',
      text: '网络不是法外之地,构建友好和谐环境'
    })
  }
}
</script>

<style>
.bg{
  background: #000; /*设置元素背景颜色*/
  width: 1000px; /*设置元素宽度*/
  height: 300px; /*设置元素高度*/
  margin: 0 auto; /*设置元素外边距*/
  padding-top: 100px; /*设置元素上内边距*/
}
.shine{
  width: 1000px;
  font-family: "方正舒体";
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  background: -webkit-linear-gradient(left, #FD5C2D, #2B242B, #252d35) 0 0;/*设置线性渐变*/
  -webkit-background-size: 160px;                        /*设置背景大小*/
  -webkit-background-clip: text;                            /*背景被裁剪到文字*/
  -webkit-text-fill-color: rgba(255, 255, 255, 0.3);        /*设置文字的填充颜色*/
  -webkit-animation: shine 6s infinite;                    /*设置动画*/
}
@-webkit-keyframes shine{   /*创建动画*/
  0%{
    background-position: 0 0;
  }
  100%{
    background-position: 100% 100%;
  }
}

</style>
